.items {
  @apply flex flex-wrap items-center relative;
  width: calc(100% - 1rem);

  &.itemsLeft {
    @apply justify-start;
  }

  .arrow {
    @apply cursor-pointer opacity-70 w-8 h-8 absolute;
    transform: translateY(-50%);
    z-index: var(--content-index);

    &:hover {
      @apply opacity-100;
    }

    &.arrowLeft {
      @apply top-2/4;
      left: -2rem;
    }

    &.arrowRight {
      right: -2rem;
    }
  }

  .item {
    @apply flex flex-col items-center justify-center;
    height: 7.125rem;

    .img {
      @apply w-20 h-20 flex items-center justify-center bg-white-10;
      border-radius: 50%;

      &:hover {
        @apply bg-theme;
      }

      & > img {
        width: 3.75rem;
        height: 3.75rem;
      }
    }

    .name {
      @apply text-base leading-6 text-white;
      margin-top: 0.625rem;
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .items {
    @apply mt-2 mb-2 h-10 w-full flex-wrap px-4 overflow-x-auto;

    .arrow {
      @apply w-4 h-4;
    }

    .item {
      @apply flex text-xs;
      margin-bottom: 0 !important;
      height: 1.375rem;
    }

    .itemPhone {
      @apply shrink-0 text-xs px-4 mr-4 text-white-80 bg-white-10;
      height: 1.875rem;
      line-height: 1.875rem;
      border-radius: 1.375rem;
    }

    scrollbar-width: 0rem;

    &::-webkit-scrollbar {
      @apply w-0 h-0;
    }
  }
}
